<template>
  <div>
    <div
      style="margin: 5px 0; display: flex; justify-content: space-between"
      v-if="showSearch"
    >
      <div style="display: flex; align-items: center">
        <el-input
          v-model="strfilter"
          placeholder="请输入工单号"
          style="width: 200px"
          class="filter-item"
          size="small"
          clearable
          @keyup.enter.native="search(strfilter)"
        />
        <el-button
          class="filter-item"
          type="primary"
          size="small"
          @click="search(strfilter)"
        >
          查询
        </el-button>
        <slot name="btnLeft" />
      </div>
      <div style="display: flex; align-items: center">
        <el-button-group>
          <el-button
            :type="!queryParams.accurate ? 'primary' : 'default'"
            @click="queryParams.accurate = false"
            size="small"
            >模糊</el-button
          >
          <el-button
            :type="queryParams.accurate ? 'primary' : 'default'"
            @click="queryParams.accurate = true"
            size="small"
            >精确</el-button
          >
        </el-button-group>
      </div>
    </div>
    <div>
      <el-table
        ref="selectVal"
        :data="list"
        border
        fit
        :height="tableHeight"
        highlight-current-row
        style="overflow: auto"
        @row-click="rowClick"
        :row-class-name="rowIndex"
        :size="tableSize"
        show-summary
        :summary-method="getSummaries"
        :row-style="{ height: '20px' }"
        :cell-style="{ 'font-size': '15px' }"
      >
        <template slot="empty">
          <el-empty description="暂无单据" :image-size="120"></el-empty>
        </template>
        <el-table-column v-if="multi == 1" type="selection" width="40" />
        <el-table-column
          v-if="multi == 0"
          label=""
          width="40"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-radio
              v-model="radio"
              :label="scope.$index"
              @change.native="getCurrentRow(scope.row)"
            >
              {{ " " }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="ID" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="工单号"
          align="center"
          prop="workOrderNumber"
          width="140px"
        />
        <el-table-column label="销售单号" align="center" prop="number" />
        <el-table-column label="客户" align="center" prop="clientName" />
        <el-table-column label="型号" align="center" prop="modelNumber" />
        <el-table-column
          label="长度"
          align="center"
          prop="length"
          show-overflow-tooltip
        />
        <el-table-column
          label="高度"
          align="center"
          prop="height"
          show-overflow-tooltip
        />
        <el-table-column label="工艺要求" align="center" prop="technology">
          <template slot-scope="scope">
            <span v-if="scope.row['technology'] == 0">冷胶</span>
            <span v-else-if="scope.row['technology'] == 1">热胶</span>
            <span v-else-if="scope.row['technology'] == 3">先冷后热</span>
            <span v-else>无工艺</span>
          </template>
        </el-table-column>
        <el-table-column
          label="物流方式"
          align="center"
          prop="deliveryMethod"
        />
        <el-table-column
          label="备注"
          align="center"
          min-width="150"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.orderRemark }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="search(strfilter)"
    />
  </div>
</template>

<script>
import { listRecord } from "@/api/qb";
export default {
  components: {},
  props: {
    showSearch: {
      type: Boolean,
      default: true,
    },
    searchVal: {
      type: String,
      default: "",
    },
    tableHeight: {
      type: String,
      default: "",
    },
    tableSize: {
      type: String,
      default: "medium",
    },
    multi: {
      type: Number,
      default: 1,
    },
    bgColor: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    return {
      title: "工单信息",
      list: [], //  列表数据
      strfilter: !!this.searchVal ? this.searchVal : "", // 搜索框内输入的值
      total: 0,
      radio: "", // 单选用参数默认为0即可
      selrows: "", // 选择的内容 单选变量
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        orderType: "-1",
        orderId: null,
        clientId: null,
        clientName: null,
        cashAccount: null,
        rebateAccount: null,
        otherAccount: null,
        technology: null,
        isShortage: null,
        status: null,
        process: null,
        number: null,
        workOrderNumber: null,
        modelNumber: null,
        orderRemark: null,
        accurate: true,
      },
      warehouseList: [],
    };
  },
  created() {},
  mounted() {},
  methods: {
    //  单选列方法
    getCurrentRow(row) {
      this.$forceUpdate();
      this.selrows = row;
      this.$emit("selRowVal", row);
    },
    // 加载列表
    getList() {
      if (!!this.searchVal) {
        this.queryParams.modelNumber = this.searchVal;
      }

      const queryParams = {
        ...this.queryParams,
      };
      listRecord(queryParams).then((res) => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    // 查询
    search(res) {
      this.queryParams.modelNumber = res;
      this.queryParams.pageNum = 1;
      const queryParams = {
        ...this.queryParams,
      };
      listRecord(queryParams).then((res) => {
        this.list = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      var arr = ["length"];
      const sums = [];
      columns.forEach((column, index) => {
        var bor = false;
        if (
          arr.length > 0 &&
          arr.find((item) => item == column.property) != undefined
        ) {
          bor = true;
        }
        if (index === 1) {
          sums[index] = "合计";
        } else {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value)) && bor) {
            sums[index] = Number(
              values
                .reduce((prev, curr) => {
                  const value = Number(curr);
                  if (!isNaN(value)) {
                    return prev + curr;
                  } else {
                    return prev;
                  }
                }, 0)
                .toFixed(2)
            );
          }
        }
      });
      return sums;
    },
    rowIndex({ row, rowIndex }) {
      row.row_index = rowIndex;
      // if (this.bgColor == row.batchNumber) {
      //   return "success-row";
      // }
    },
    rowClick(row) {
      this.radio = row.row_index;
      this.getCurrentRow(row);
    },
  },
};
</script>
<style lang="scss" scoped>
.current-row {
  background: blue;
}
::v-deep .el-table .success-row {
  background: #d4d8f7;
}
::v-deep .pagination-container {
  margin-top: 0px !important;
}
</style>
